<template>
<MenuPage 
        :page.sync="queryClassInfo.pageIndex"
        :size.sync="queryClassInfo.pageSize"
        :columns="classCol"
        :data="classList"
        :total="totalCount"
        :loading="loading"
        @queryFun="queryClassList">
    <template slot="search">

<!--            <Divider type="vertical" />-->
            <Checkbox v-model="createByMe" @on-change="debounceQuery"
              >由我创建</Checkbox
            >
            <!-- <Select filterable
              v-model="queryClassInfo.type"
              placeholder="选择教学分类"
              @on-change="changePage(1)"
              style="width: 150px; margin-left: 15px"
              clearable
            >
              <Option value="1">实操模式</Option>
              <Option value="2">讲课模式</Option>
              <Option value="3">教学模式</Option>
            </Select>
            <Input
              v-model.trim="queryClassInfo.className"
              clearable
              placeholder="班级名称"
              style="width: 180px; margin-left: 15px"
              @on-change="changePage(1)"
            /> -->
            <Select filterable
              v-model="queryClassInfo.status"
              placeholder="请选择状态"
              @on-change="changePage(1)"
              style="width: 180px; margin-left: 15px"
              clearable
            >
              <Option value="0">未开始</Option>
              <Option value="1">进行中</Option>
              <Option value="2">已结束</Option>
            </Select>
            <Input
              v-model.trim="queryClassInfo.egName"
              clearable
              placeholder="请输入教学名称"
              style="width: 180px; margin-left: 15px"
              @on-change="debounceQuery"
            />
      <Button type="primary" ghost @click="addClass" class="md-add-jh"
      ><i class="el-icon-edit"></i>创建</Button
      >
            <Button
              class="header-btn"
              type="primary"
              ghost
              style="height: 32px; margin-left: 5px"
              @click="refreshMyClassList()"
              ><i class="el-icon-refresh-right"
            /></Button>
    </template>
    <EditModal
      v-model="edit.show"
      :type="edit.type"
      :data="edit.data"
      @close="closeEdit"
      @updateList='queryClassList'
    ></EditModal>
    <Modal
      v-model="showUserModal.show"
      :title="`实验组上课人员 - [ ${showUserModal.group.egName} ]`"
      footer-hide
      :width="1000"
      class="modal-title" 
    >
      <TableList
        :columns="userCol"
        :data="showUserModal.list"
        :page="showUserModal.page"
        :size="showUserModal.size"
        :total="showUserModal.total"
        @queryFun="getClassUsers(showUserModal.group)"
      ></TableList>
    </Modal>
    <Drawer
      title="课程安排"
      v-model="scheduleDrawer"
      width="720"
      :mask-closable="false"
      :closable="false"
      id="setOverflowDraw"
    >
      <div class="drawer-close" @click="closeDistribution">
        <img src="../../../assets/globalIcon/close-drawer.png" alt="Close" />
      </div>
      <ClassCourseList
        :classInfo="curClass"
        v-if="scheduleDrawer"
      ></ClassCourseList>
    </Drawer>
    <Modal
      title="相关统计"
      v-model="statisticalDrawer"
      :width="500"
      @on-cancel="closeStatistical"
      id="setStatisticalDraw"
      footer-hide
    >
      <List border>
        <ListItem class="list1">
          <span>教学班排课总次数：</span>
          <Tag color="green">{{ statistical.count }}</Tag>
        </ListItem>
        <ListItem class="list1"
          ><span>排课课件总数：</span>
          <Tag color="green">{{ statistical.examCount }}</Tag>
        </ListItem>
        <ListItem class="list1">
          <span>参与学员总数：</span>
          <Tag color="green">{{ statistical.studentCount }}</Tag>
        </ListItem>
        <ListItem class="list1">
          <span>观看课件视频总人数：</span>
          <Tag color="green">{{ statistical.watchVideoPeopleCount }}</Tag>
        </ListItem>
        <ListItem class="list1">
          <span>答题总数：</span>
          <Tag color="green">{{ statistical.studentAnswerCount }}</Tag>
        </ListItem>
        <ListItem class="list1">
          <span>答题正确总数：</span>
          <Tag color="green">{{ statistical.studentRightAnswerCount }}</Tag>
        </ListItem>
        <ListItem class="list1">
          <span>统计报告总人数：</span>
          <Tag color="green">{{ statistical.reportPeopleCount }}</Tag>
        </ListItem>
        <ListItem class="list1">
          <span>报告审核总人数：</span>
          <Tag color="green">{{ statistical.reportCheckedPeopleCount }}</Tag>
        </ListItem>
        <ListItem
          class="list1"
          v-for="(item, index) of statistical.reportCheckedLevelCount"
          :key="index"
        >
          <span>报告审核等级{{ levelType(index) }}：</span>
          <Tag color="green">{{ item }}</Tag>
        </ListItem>
      </List>
      <!-- <div
        style="position: absolute; top: 70px; left: -17px; cursor: pointer"
        @click="closeStatistical"
      >
        <img src="../../../assets/globalIcon/closeIcon.png" alt="Close" />
      </div> -->
    </Modal>
</MenuPage>
</template>

<script>
import encryption from '@/libs/encryption.js';
import { debounce } from '@/libs/utils';
//接口
// import { getExperGroupsUsers } from '@/api/users';
import { queryClassList, delClass, updateClassStatus, getClassUsers } from '@/api/selfStudy/class_new.js';
import { getsSatisticClassById } from '@/api/selfStudy/class.js';
import { addGroup, getGroupUsers, delGroup, getGroupInfo } from '@/api/boardcast_new.js';
import SavePlanList from './edit/save-plan-list';
//组件
import ClassCourseList from './classCourseList.vue';
import typeMixin from './mixins/typeMixin';
import EditModal from './edit/index.vue';
import { mapState } from 'vuex';
export default {
    name: 'myClass',
    components: {
        ClassCourseList,
        SavePlanList,
        EditModal
    },
    mixins: [typeMixin],
    data() {
        const validateName = (rule, value, callback) => {
            //验证只能填入数字
            var reg = new RegExp('^[\u4E00-\u9FA5a-zA-Z0-9_ -]*$');
            //验证警戒值
            if (value) {
                if (!reg.test(value)) {
                    callback(new Error('请输入中文、数字、字母、下划线、-'));
                } else {
                    callback();
                }
            } else {
                callback();
            }
        };
        const validateGroupUserNum = (rule, value, callback) => {
            //验证警戒值
            if (value.length > 0) {
                value.forEach((group) => {
                    if (group.userIds.length == 0) {
                        callback(new Error('每组请至少选择一个成员'));
                    } else {
                        callback();
                    }
                });
            } else {
                callback();
            }
        };
        return {
            showUserModal: {
                show: false,
                page: 1,
                size: 10,
                total: 0,
                list: [],
                group: {}
            },
            userList: [],
            curCourse: {},
            edit: {
                show: false,
                type: 'add',
                data: ''
            },
            curGroupName: '',
            classList: [],
            loading: false,
            classCol: [
                {
                    type: 'link',
                    title: '教学名称',
                    key: 'egName',
                    tooltip: true,
                    placement: 'top-left',
                    on:{
                        click:(data) => {
                            this.toDetailPage(data)
                        }
                    },
                    minWidth: 100
                },
                {
                    title: '状态',
                    key: 'egStatus',
                    placement: 'top-right',
                    minWidth: 100,
                    setColor: (egStatus) => {
                        return this.statusFilter(egStatus, 'color');
                    },
                    filter: (egStatus) => {
                        return this.statusFilter(egStatus, 'str');
                    }
                },
                {
                    type:'link',
                    title: '实验组',
                    key: 'groups',
                    tooltip: true,
                    placement: 'top-left',
                    on:{
                        click:(data) => {
                            this.getClassUsers(data)
                        }
                    },
                    minWidth: 100,
                    filter: (groups, data) => {
                        return data.groups.length > 0 ? data.groups.join(',') : '-';
                    }
                },
                {
                    title: '开始时间',
                    key: 'startTime',
                    minWidth: 120,
                    tooltip: true
                },
                {
                    title: '结束时间',
                    key: 'endTime',
                    minWidth: 120,
                    tooltip: true
                },
                {
                    title: '设计者',
                    key: 'teacherName',
                    minWidth: 100,
                    tooltip: true
                },
                // {
                //     title: '创建时间',
                //     key: 'createTime',
                //     minWidth: 120,
                //     tooltip: true
                // },
                {
                    title: '操作',
                    slot: 'action',
                    placement: 'top-right',
                    width: 120,
                    opList: [
                        {
                            txt: '修改',
                            disabled: this.setReBtnStatus,
                            on:{
                                click: (data,e) => {
                                    this.edit.show = true;
                                    this.edit.type = 'update';
                                    this.edit.data = data;
                                    // this.addClassModal.type = 2;
                                    // this.addClassModal.show = true;
                                    // this.addClassModal.title = '编辑教学';
                                    // this.getClassInfo(data);
                                    // this.querySkillList();
                                }
                            }
                        },
                        {
                            txt: '删除',
                            type: 'delete',
                            tooltip: true,
                            title: '你确定要删除吗?',
                            disabled: this.disDel,
                            fun: this.deleteClass
                        }
                    ]
                }
            ],
            classColNew: [
                {
                    title: '教学名称',
                    key: 'egName',
                    tooltip: true,
                    placement: 'top-left',
                    width: 200,
                    render: (h, params) => {
                        // return h('a', {
                        //     on: {
                        //         'click': () => {
                        //             this.toDetailPage(params.row);
                        //         }
                        //     }
                        // }, params.row.egName)

                        return h('Tooltip', {
                            props: {
                                'max-width': '300',
                                transfer: true,
                                placement: 'bottom-start',
                                content: params.row.egName
                            },
                            style: {
                                width: '100%',
                            }
                        }, [
                            h('a', {
                                style: {
                                    width: '180px',
                                    overflow: 'hidden',
                                    'white-space': 'nowrap',
                                    'text-overflow': 'ellipsis',
                                    // color: '#2d8cf0'
                                },
                                on: {
                                    'click': () => {
                                        this.toDetailPage(params.row);
                                    }
                                }
                            }, params.row.egName)
                        ])
                    }
                },
                {
                    type:'link',
                    title: '实验组',
                    key: 'groups',
                    tooltip: true,
                    placement: 'top-left',
                    minWidth: 100,
                    render: (h, params) => {
                        let groups = params.row.groups.length > 0 ? params.row.groups.join(',') : '-';
							return h('a', {
								on: {
									'click': () => {
										this.getClassUsers(params.row);
									}
								}
							}, groups)
						}

                },
                {
                    title: '开始时间',
                    key: 'startTime',
                    minWidth: 120,
                    tooltip: true
                },
                {
                    title: '结束时间',
                    key: 'endTime',
                    minWidth: 120,
                    tooltip: true
                },
                {
                    title: '创建者',
                    key: 'teacherName',
                    minWidth: 100,
                    tooltip: true
                },
                {
                    title: '',
                    align: 'center',
                    key: 'statistics',
                    placement: 'top-right',
                    render: (h, params) => {
                        return h('Tag', {
                            props: {
                                color: 'blue'
                            },
                            style: {
                                cursor: 'pointer!important',
                                display:'none'
                            },
                            nativeOn: {
                                click: () => {
                                    this.getStatistical(params.row);
                                }
                            }
                        }, '相关统计')
                    }
                },
                // {
                //     title: '创建时间',
                //     key: 'createTime',
                //     minWidth: 120,
                //     tooltip: true
                // },
                {
                    title: '状态',
                    key: 'egStatus',
                    placement: 'top-right',
                    minWidth: 100,
                    render: (h, params) => {
                        let egStatus = params.row.egStatus;
                        return h('span', {
                            style: {
                                color:this.statusFilter(egStatus, 'color')
                            }
                        }, this.statusFilter(egStatus, 'str'))
                    }

                },
                {
                    title: '操作',
                    // slot: 'action',
                    action:true,
                    placement: 'top-right',
                    width: 120,
                    render: (h, params) => {
                        let row = params.row
                        return h('div', {}, [

                            h('Button', {
                                props: {
                                    type: 'text',
                                    size: 'small',
                                    disabled: this.setReBtnStatus(params.row),
                                },
                                attrs: {
                                    title: '修改'
                                },
                                style: {
                                    padding: '0px',
                                    background: 'none',
                                    border: 'none',
                                    boxShadow: 'none',
                                    marginLeft: '20px'
                                },
                                on: {
                                    click: () => {
                                        this.edit.show = true;
                                        this.edit.type = 'update';
                                        this.edit.data = row;
                                    }
                                }
                            }, [
                                h('img', {
                                    attrs: {
                                        src: this.setReBtnStatus(row) ? require('../../../assets/project/modifys.png') : require('../../../assets/project/modifys-h.png')
                                    }
                                })
                            ]),

                            h('Poptip', {
                                props: {
                                    confirm: true,
                                    'ok-text': "确定",
                                    'cancel-text': "取消",
                                    type: 'error',
                                    size: 'large',
                                    title: '你确定要删除吗?',
                                    transfer: true
                                },
                                attrs: {
                                    title: '删除'
                                },
                                style: {
                                    marginLeft: '20px'
                                },
                                on: {
                                    'on-ok': () => {
                                        this.deleteClass(params.row)
                                    }
                                }
                            }, [
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'small',
                                        disabled: this.disDel(row)
                                    },
                                    style: {
                                        padding: '0px',
                                        background: 'none',
                                        border: 'none',
                                        boxShadow: 'none'
                                    },
                                }, [
                                    h('img', {
                                        attrs: {
                                            src: this.disDel(row) ? require('../../../assets/project/delNote-d.png') : require('../../../assets/project/delNote-h.png')
                                        }
                                    })
                                ])
                            ]),

                            // h('Button', {
                            //     props: {
                            //         type: 'text',
                            //         size: 'small',
                            //         disabled: this.setReBtnStatus(row),
                            //     },

                            //     // style: {
                            //     //     color: !(setReBtnStatus || testStatus === 0) ? '#307ced' : '#ccc',
                            //     // },
                            //     on: {
                            //         click: () => {
                            //             this.edit.show = true;
                            //             this.edit.type = 'update';
                            //             this.edit.data = row;
                            //             // this.addClassModal.type = 2;
                            //             // this.addClassModal.show = true;
                            //             // this.addClassModal.title = '编辑教学';
                            //             // this.getClassInfo(data);
                            //             // this.querySkillList();
                            //         }
                            //     }
                            // }, '编辑'),
                            // h('Poptip', {
                            //     props: {
                            //         confirm: true,
                            //         'ok-text': "确定",
                            //         'cancel-text': "取消",
                            //         type: 'error',
                            //         size: 'large',
                            //         title: '你确定要删除吗?',
                            //         transfer: true
                            //     },

                            //     style: {},
                            //     on: {
                            //         'on-ok': () => {
                            //             this.deleteClass(row)
                            //         }
                            //     }
                            // }, [
                            //     h('Button', {
                            //         props: {
                            //             type: 'text',
                            //             size: 'small',
                            //             disabled: this.disDel(row),
                            //         },

                            //     }, '删除')
                            // ])
                        ])
                    }
                }
            ],
            userCol: [
                {
                    type: 'index',
                    width: 60
                },
                {
                    title: '昵称',
                    key: 'nickname'
                },
                {
                    title: '用户名',
                    key: 'username'
                },
                // {
                //     title: '邮箱',
                //     key: 'email',
                //     align: 'left'
                // },
                {
                    title: '是否在线',
                    key: 'online',
                    render: (h, params) => {
                        let text = '';
                        if (!params.row.online || params.row.online === 'false') {
                            text = '#999';
                        } else {
                            text = '#307CED';
                        }
                        return h(
                            'Tag',
                            {
                                props: {
                                    color: text,
                                    type: 'border'
                                }
                            },
                            params.row.online ? '是' : '否'
                        );
                    }
                },
                {
                    title: '设计者',
                    key: 'creatorName'
                },
                {
                    // type: 'html',
                    title: '描述',
                    key: 'description',
                    tooltip: true,
                    ellipsis: true,
                }
                // {
                //     title: '创建时间',
                //     key: 'created',
                //     minWidth: 120,
                //     align: 'left',
                //     sortable: true
                // }
            ],
            totalCount: 0,
            expGroupList: [],
            expGroupUsersList: [],
            createByMe: false,
            queryClassInfo: {
                pageIndex: 1,
                pageSize: 10,
                teacherId: ''
                // egId:'',
                // className:'TEST',
                // type:'',
                // teacherName:''
            },
            USER_ID: '',
            USER_NAME: '',
            curClassId: '',
            showDefImg: true,
		    showDefText: "加载中",
            scheduleDrawer: false,
            statistical:{},
			statisticalDrawer:false,
        };
    },
    computed: {
        pageTitle () {
            //当前菜单显示名
            return this.$route.meta.title;
        },
        pageSTitle () { // 小菜单明
          //当前菜单显示名
          return (this.$route.meta.title+"").substring(0,2);
        },
         tooltipTitle() {
            return `<Tooltip content="${this.title}">${this.title}</Tooltip>`;
        },
    },
    created() {
        //初始化数据
        let September = sessionStorage.getItem('November');
        September = JSON.parse(encryption.SelfUseDecrypt(September));
        this.USER_ID = September.userId;
        this.USER_NAME = September.nickname;
        //赋值查询条件
        let queryObj = sessionStorage.getItem('queryObj');
        if (queryObj) {
            let params = JSON.parse(queryObj);
            this.createByMe = params.teacherId == this.USER_ID;
            this.queryClassInfo = params;
            sessionStorage.removeItem('queryObj');
        }
    },
    mounted() {
        // this.getExpGroupList();
        this.queryClassList();
    },
    beforeDestroy() {
        // clearTimeout(this.timeout);
    },
    filters: {},
    methods: {
        //创建教学按钮调用
        addClass() {
            this.edit.show = true;
            this.edit.type = 'add';
        },
        closeEdit() {
            if (this.edit.type === 'add') {
                this.refreshMyClassList();
            } else {
                this.queryClassList();
            }
        },
        toDetailPage(item) {
            sessionStorage.setItem('queryObj', this.queryObj);
            this.$router.push({
                name: 'courseScheduleDetail',
                params: {
                    id: item.id,
                },
                query: {
                    name:item.egName
                }
            });
        },
        //查询教学列表
        queryClassList () {
            this.loading = true;
            if (this.createByMe) {
                this.queryClassInfo.teacherId = this.USER_ID;
            } else {
                this.queryClassInfo.teacherId = '';
            }
            this.queryObj = JSON.stringify(this.queryClassInfo);
            queryClassList(this.queryClassInfo)
                .then((data) => {
                    if (data.code == 1) {
                        this.classList = data.data.items;
                        this.totalCount = data.data.total;
                        this.loading = false;
                        // clearTimeout(this.timeout); // 定时
                        // this.timeout = setTimeout(() => {
                        //     this.queryClassList();
                        // }, 5000);
                        return;
                        //查询聊天组是否创建成功
                        let pArr = classList.map(async (item) => {
                            try {
                                await getGroupInfo(item.id)
                                    .then((res) => {
                                        if (res.code && res.data.data) {
                                            item.hasChatGroup = true;
                                        } else {
                                            item.hasChatGroup = false;
                                        }
                                    })
                                    .catch((error) => {
                                        item.hasChatGroup = true;
                                    });
                            } catch (err) {
                                item.hasChatGroup = true;
                                console.log(err);
                            }
                            return item;
                        });
                        Promise.all(pArr)
                            .then((data) => {
                                this.classList = classList;
                                this.totalCount = totalCount;
                                this.loading = false;
                            })
                            .catch(() => {
                                this.loading = false;
                            });
                    } else {
                        this.classList = [];
                        this.$Message.warning(data.message);
                        this.loading = false;
                    }
                })
                .catch(() => {
                    this.loading = false;
                });
        },
        getData(page, size) {
            this.loading = true;
            this.queryClassInfo.pageIndex = page;
            this.queryClassInfo.pageSize = size;
            this.queryClassList();
        },
        changePage(page) {
            this.queryClassInfo.pageIndex = page;
            this.queryClassList();
        },
        debounceQuery: debounce(function() {
            this.changePage(1);
        }, 500),
        //更新教学状态
        updateClassStatus(classId, status) {
            updateClassStatus(classId, status).then((data) => {
                if (data.code == 1) {
                    this.queryClassList();
                    this.$Message.info(data.message);
                } else {
                    this.$Message.warning(data.message);
                }
            });
        },
        //删除教学列表
        deleteClass(classInfo) {
            delClass(classInfo.id)
                .then((data) => {
                    if (data.code == 1) {
                        this.$Message.info(data.message);
                        this.queryClassList();
                        //if(classInfo.hasChatGroup) {
                        //删除聊天组
                        //this.delGroup(classInfo.id);
                        //}
                    } else {
                        this.$Message.warning(data.message);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        getClassUsers(data) {
            let query = {
                pageIndex: this.showUserModal.page,
                pageSize: this.showUserModal.size
            };
            this.showUserModal.group = data;
            getClassUsers(data.id, query)
                .then(({ code, data, message }) => {
                    if (code === 1) {
                        this.showUserModal.show = true;
                        this.showUserModal.list = data.items;
                        this.showUserModal.total = data.total;
                    } else {
                    }
                })
                .catch((error) => {});
        },
        changeUserPage(page) {
            this.showUserModal.page = page;
            this.getClassUsers(this.showUserModal.group);
        },
        //查询实验组成员--点击实验组名称调用
        getExperGroupsUsers(params) {
            this.showUserModalshow = true;
            this.curGroupName = params.egName;
            getExperGroupsUsers(params.egId).then((data) => {
                if (data.code == 1) {
                    this.userList = data.data.map((user) => user.user);
                } else {
                    this.$Message.warning(data.message);
                }
            });
        },
        //刷新按钮调用
        refreshMyClassList() {
            this.queryClassInfo.pageIndex = 1;
            this.queryClassInfo.egName = '';
            this.queryClassInfo.status = '';
            this.queryClassInfo.teacherId = this.USER_ID;
            this.createByMe = false;
            this.changePage(1);
        },
        statusFilter(val, type) {
            let str = '',
                color = '';
            switch (val) {
                case 0:
                    str = '未开始';
                    color = 'var(--status-pre)';
                    break;
                case 1:
                    str = '进行中';
                    color = 'var(--status-ing)';
                    break;
                case 2:
                    str = '已结束';
                    color = 'var(--status-deling)';
                    break;
            }
            return type === 'color' ? color : str;
        },
        setReBtnStatus(params) {
            let userid = params.teacherId;
            if (userid === this.USER_ID) {
                //|| this.isRootDesinger
                return false;
            } else {
                return true;
            }
        },
        getStatistical (row) {
            this.statisticalDrawer = true;
            getsSatisticClassById(row.id).then(res => {
                if (res.code == 1) {
                    this.statistical = res.data
                } else {
                    this.$Message.warning(res.message)
                }
            })
        },
        closeStatistical () {
            this.statisticalDrawer = false;
        },
        levelType (index) {
            if (index == 0) {
                return '未学'
            } else if (index == 1) {
                return '差'
            } else if (index == 2) {
                return '良'
            } else {
                return '优'
            }
        },
        disDel(params) {
            let userid = params.teacherId;
            if (userid === this.USER_ID && params.egStatus !== 1) {
                //|| this.isRootDesinger
                return false;
            } else {
                return true;
            }
        },
        //创建聊天组
        addGroup(groupInfo, needShowTip) {
            let groupUsers = this.expGroupUsersList.map((user) => {
                return {
                    avatar: '',
                    userId: user.user.id,
                    userName: user.user.nickname
                };
            });
            groupUsers.push({
                avatar: '',
                userId: groupInfo.teacherId,
                userName: groupInfo.teacherName
            });
            let params = {
                avatar: '',
                id: groupInfo.id,
                name: groupInfo.className,
                groupUsers: groupUsers
            };
            addGroup(params)
                .then((data) => {
                    if (data.code == 1) {
                        if (needShowTip) {
                            this.$Message.info('聊天组创建成功');
                            groupInfo.hasChatGroup = true;
                        }
                    } else {
                        this.$Message.error(data.message);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        //删除聊天组
        delGroup(groupId) {
            delGroup(groupId)
                .then((data) => {
                    if (data.code == 1) {
                    } else {
                        this.$Message.warning(data.message);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        getClassCourse(item) {
            this.scheduleDrawer = true;
            sessionStorage.setItem('queryObj', this.queryObj);
            this.curClass = item;
        },
        closeDistribution() {
            this.scheduleDrawer = false;
            sessionStorage.removeItem('queryObj');
        }
    }
};
</script>
<style scoped>
.list1 {
  display: flex;
  /* justify-content: flex-end; */
}
.list1 span {
  width: 50%;
  text-align: right;
  margin-right: 10px;
}
/deep/#setOverflowDraw .ivu-drawer-body {
  overflow: inherit;
}
/deep/#setStatisticalDraw .ivu-drawer-body {
  overflow: inherit;
}
/deep/.v-transfer-dom .ivu-modal-header-inner{
    width: 95% !important;
}
.modal-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
